<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-01-25 22:28:22
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-01-26 20:26:11
 * @FilePath: /tuberculosis_screening_app/src/modules/patient/components/DateInput/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="date-range-wrapper">
    <div class="date-range align-items_center">
      <DateInput
        class="flex p_unset"
        :value="model.start"
        left-icon="none"
        placeholder="起始日期"
      />
      <span class="separator">-</span>
      <DateInput
        class="flex p_unset"
        :value="model.end"
        left-icon="none"
        placeholder="结束日期"
      />
    </div>
  </div>
</template>

<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent, reactive } from 'vue';
import DateInput from '../DateInput/index.vue'; 

type Model = [String, String];
function useModel([start, end]: Model = ['', '']) {
  const model = reactive({
    start,
    end,
  });
  return [model];
}

export default defineComponent({
  name: 'DateRange',
  components: {
    DateInput
  },
  props: {
    value: {
      type: Array as unknown as PropType<Model>,
    },
  },
  setup(props) {
    const [model] = useModel(props.value as [string, string]);

    console.log('model', model);
    return {
      model,
    };
  },
});
</script>

<style lang="scss" scoped>
.date-range-wrapper {
  padding: var(--van-search-padding);
  
}
.separator {
  // border: solid 1px #d9d9d9;
  color: #d9d9d9;
}
.date-range {
  background: var(--van-search-content-background);
}
</style>

